<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Live2D 看板娘 v1.4 / Demo 2</title>
</head>
<body style="font-family: 'Microsoft YaHei';">
    <h2><a href="https://www.fghrsh.net/post/123.html" style="color: #38A3DB; text-decoration: none;">Live2D 看板娘 v1.4</a> / Demo 2</h2>
    <h3> - 自动加载 autoload.js <span style="font-size: 12px;color: #666">(一般网站引用推荐)</span></h3>
    <ul>
        <li><a href="demo1-default.html" style="color: #38A3DB; text-decoration: none;" title="常规博客引用推荐">Demo 1 - 常规引用</a></li>
        <li><span title="一般网站引用推荐">Demo 2 (当前面页)</span></li>
        <li><a href="demo3-waifu-tips.html" style="color: #38A3DB; text-decoration: none;" title="博客园等网站引用推荐">Demo 3 - 内置 waifu-tips.json</a></li>
    </ul>
    
    <code><pre>
&lt;!DOCTYPE html&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
    &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot; /&gt;
    &lt;title&gt;Live2D 看板娘 v1.4 / Demo 2&lt;/title&gt;
&lt;/head&gt;
&lt;body style=&quot;font-family: &#x27;Microsoft YaHei&#x27;;&quot;&gt;
    &lt;h2&gt;&lt;a href=&quot;https://www.fghrsh.net/post/123.html&quot; style=&quot;color: #38A3DB; text-decoration: none;&quot;&gt;Live2D 看板娘 v1.4&lt;/a&gt; / Demo 2&lt;/h2&gt;
    &lt;h3&gt; - 自动加载 autoload.js &lt;span style=&quot;font-size: 12px;color: #666&quot;&gt;(一般网站引用推荐)&lt;/span&gt;&lt;/h3&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;a href=&quot;demo1-default.html&quot; style=&quot;color: #38A3DB; text-decoration: none;&quot; title=&quot;常规博客引用推荐&quot;&gt;Demo 1 - 常规引用&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;span title=&quot;一般网站引用推荐&quot;&gt;Demo 2 (当前面页)&lt;/span&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;demo3-waifu-tips.html&quot; style=&quot;color: #38A3DB; text-decoration: none;&quot; title=&quot;博客园等网站引用推荐&quot;&gt;Demo 3 - 内置 waifu-tips.json&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    
    &lt;!-- waifu-tips.js 依赖 JQuery 库 --&gt;
    &lt;script src=&quot;assets/jquery.min.js?v=3.3.1&quot;&gt;&lt;/script&gt;
    
    &lt;!-- 实现拖动效果，需引入 JQuery UI --&gt;
    &lt;script src=&quot;assets/jquery-ui.min.js?v=1.12.1&quot;&gt;&lt;/script&gt;
    
    &lt;!-- 使用 aotuload.js 引入看板娘 --&gt;
    &lt;script src=&quot;assets/autoload.js?v=1.4.2&quot;&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

# autoload.js
try {
    $(&quot;&lt;link&gt;&quot;).attr({href: &quot;assets/waifu.min.css?v=1.4.2&quot;, rel: &quot;stylesheet&quot;, type: &quot;text/css&quot;}).appendTo(&#x27;head&#x27;);
    $(&#x27;body&#x27;).append(&#x27;&lt;div class=&quot;waifu&quot;&gt;&lt;div class=&quot;waifu-tips&quot;&gt;&lt;/div&gt;&lt;canvas id=&quot;live2d&quot; class=&quot;live2d&quot;&gt;&lt;/canvas&gt;&lt;div class=&quot;waifu-tool&quot;&gt;&lt;span class=&quot;fui-home&quot;&gt;&lt;/span&gt; &lt;span class=&quot;fui-chat&quot;&gt;&lt;/span&gt; &lt;span class=&quot;fui-eye&quot;&gt;&lt;/span&gt; &lt;span class=&quot;fui-user&quot;&gt;&lt;/span&gt; &lt;span class=&quot;fui-photo&quot;&gt;&lt;/span&gt; &lt;span class=&quot;fui-info-circle&quot;&gt;&lt;/span&gt; &lt;span class=&quot;fui-cross&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&#x27;);
    $.ajax({url: &#x27;assets/waifu-tips.min.js?v=1.4.2&#x27;,dataType:&quot;script&quot;, cache: true, async: false});
    $.ajax({url: &#x27;assets/live2d.min.js?v=1.0.5&#x27;,dataType:&quot;script&quot;, cache: true, async: false});
    /* 可直接修改部分参数 */
    live2d_settings[&#x27;hitokotoAPI&#x27;] = &#x27;hitokoto.cn&#x27;;  // 一言 API
    live2d_settings[&#x27;modelId&#x27;] = 5;                  // 默认模型 ID
    live2d_settings[&#x27;modelTexturesId&#x27;] = 1;          // 默认材质 ID
    live2d_settings[&#x27;modelStorage&#x27;] = false;         // 不储存模型 ID
    /* 在 initModel 前添加 */
    initModel(&#x27;assets/waifu-tips.json&#x27;);
} catch(err) { console.log(&#x27;[Error] JQuery is not defined.&#x27;) }
    </pre></code>
    
    <!-- waifu-tips.js 依赖 JQuery 库 -->
    <script src="assets/jquery.min.js?v=3.3.1"></script>
    
    <!-- 实现拖动效果，需引入 JQuery UI -->
    <script src="assets/jquery-ui.min.js?v=1.12.1"></script>
    
    <!-- 使用 aotuload.js 引入看板娘 -->
    <script src="assets/autoload.js?v=1.4.2"></script>
</body>
</html>
